<template>
    <div class="buyer-container">
        <el-card class="box-card">
            <template #header>

                <div class="card-header">
                    <span class="text">报价信息</span>

                    <el-button class="button" plain text type="primary" @click="dialogVisible = true">进行摘牌
                    </el-button>
                </div>
            </template>
            <div style="margin-left: 25px;">
                <div class="item" v-for="it in dataList" :key="it.value">
                    <span class="label">{{it.label}} : </span>
                    <span class="value">{{it.format(item[it.value])}}</span>
                </div>
            </div>

        </el-card>

        <el-dialog v-model="dialogVisible" title="请确认你的挂牌信息" width="800px">
            <BuyerData />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-popconfirm title="你确定要摘牌" confirm-button-text="确认摘牌" cancel-button-text="取消"
                        confirm-button-type="primary" @confirm="handleClick(item)">
                        <template #reference>
                            <el-button class="button" type="primary">摘牌
                            </el-button>
                        </template>
                    </el-popconfirm>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { sellerDelistingApi } from '../../../../../api/user';
import { coalType, businessType, transportMethod, settlementMethod, checkMethod } from '../../../../../select/user';
import { responseCallback } from '../../../../../utils';
import { formatDate } from '../../../../../utils/date';
import BuyerData from '../../ownBuyer/component/BuyerData.vue';
import { dataList } from '../data';


defineProps(["item"])
const dialogVisible = ref(false);


const handleClick = function (item) {
    responseCallback({
        promise: sellerDelistingApi({
            id: item.id
        }),
        successMessage: "摘牌成功，请到交易中心进行后续操作！！！",
        cb() {
            setTimeout(() => {
                location.reload()
            }, 1000);
        }
    })
    console.log(item);
}
</script>

<style lang="less" scoped>
.buyer-container {

    margin-bottom: 2rem;
    width: 45%;



    .card-header {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .text {
            width: 60%;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .button {
            width: 100px;
        }
    }

    .btn-container {
        display: flex;
        justify-content: space-around;
    }

    .item {
        padding: 10px 0;
        border-bottom: 1px dashed #ccc;

        &:last-child {
            border-bottom: none
        }

        .label {
            width: 130px;
            display: inline-block;
        }

    }

    .footer {
        margin-top: 2rem;
        display: flex;
        justify-content: flex-end;
    }

    .el-drawer {
        .item {
            padding-bottom: 10px;
            border-bottom: 1px dashed #ccc;
        }

        .label {
            width: 150px;
            display: inline-block;

        }

        .info {
            margin-top: 20px;
            display: flex;
            font-weight: 700;
            justify-content: flex-end;

            span:first-child {
                margin-right: 1rem;
            }
        }
    }

}
</style>